import React from 'react';
import {View} from '@ant-design/react-native';
import {Text, StyleSheet} from 'react-native';
import {TMessage} from '../../type/TMessage';

const MessageItem: React.FC<{messageData: TMessage}> = ({
  messageData: {realname, content},
}) => {
  return (
    <View style={styles.message}>
      <View style={styles.messageHeader}>
        {[1, 2, 3].map(item => (
          <Text style={styles.messageHeaderCir} key={item} />
        ))}
      </View>
      <View>
        <Text style={styles.messageRealname}>{realname}</Text>
      </View>
      <View>
        <Text style={styles.messageContent}>{content}</Text>
      </View>
    </View>
  );
};
const styles = StyleSheet.create({
  message: {
    padding: 10,
    backgroundColor: '#fff',
    margin: 10,
    borderRadius: 10,
  },
  messageHeader: {
    height: 30,
    display: 'flex',
    flexDirection: 'row',
  },
  messageHeaderCir: {
    backgroundColor: '#d8d8d8',
    width: 16,
    height: 16,
    marginRight: 6,
    borderRadius: 16,
  },
  messageRealname: {
    color: '#377df6',
  },
  messageContent: {
    color: '#000',
    fontSize: 12,
    marginTop: 6,
  },
});

export default MessageItem;
